<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="本文总结下几种微前端技术方案。">
<meta property="og:type" content="article">
<meta property="og:title" content="微前端技术方案">
<meta property="og:url" content="https://huangrenhao.gitee.io/2020/09/25/js-micro-font-end/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="本文总结下几种微前端技术方案。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-09-26T03:42:21.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="微前端技术方案">
<meta name="twitter:description" content="本文总结下几种微前端技术方案。">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2020/09/25/js-micro-font-end/">





  <title>微前端技术方案 | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2020/09/25/js-micro-font-end/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">微前端技术方案</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-25T19:31:54+08:00">
                2020-09-25
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/js/" itemprop="url" rel="index">
                    <span itemprop="name">js</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2020/09/25/js-micro-font-end/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2020/09/25/js-micro-font-end/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  7
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文总结下几种微前端技术方案。<a id="more"></a></p>
<h3 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h3><p>微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(<a href="https://link.zhihu.com/?target=https%3A//www.youtube.com/watch%3Fv%3DpU1gXA0rfwc" target="_blank" rel="noopener">Frontend Monolith</a>)后，随之而来的应用不可维护的问题。</p>
<p>微前端体现出分治思想，类似于微服务的架构，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品</p>
<blockquote>
<p>微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来<br>具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理</p>
</blockquote>
<p>微前端的技术价值：</p>
<ul>
<li>技术栈无关 主框架不限制接入应用的技术栈，子应用具备完全自主权</li>
<li>独立开发、独立部署、增量升级 子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新</li>
<li>独立运行时 每个子应用之间状态隔离，运行时状态不共享</li>
<li>简单、松耦合的代码库，避免模块间不合理的隐式耦合造成的复杂度上升，通过界定清晰的应用边界来降低意外耦合的可能性，增加子应用间逻辑耦合的成本，促使开发者明确数据和事件在应用程序中的流向</li>
</ul>
<p>mpa 与 spa 的优缺点：</p>
<ul>
<li><p>MPA 方案的优点在于 部署简单、各应用之间硬隔离，天生具备技术栈无关、独立开发、独立部署的特性。缺点则也很明显，应用之间切换会造成浏览器重刷，由于产品域名之间相互跳转，流程体验上会存在断点。</p>
</li>
<li><p>SPA 则天生具备体验上的优势，应用直接无刷新切换，能极大的保证多产品之间流程操作串联时的流程性。缺点则在于各应用技术栈之间是强耦合的。</p>
</li>
</ul>
<p>微前端技术兼具 spa 和 mpa 的优势，即保证应用具备独立开发权的同时，又有将它们整合到一起保证产品完整的流程体验的能力。</p>
<h3 id="架构模式"><a href="#架构模式" class="headerlink" title="架构模式"></a>架构模式</h3><p>从应用间关系可以分为两种：基座模式（管理式）、自组织式。</p>
<ul>
<li>基座模式：通过一个主应用来管理其他应用，设计难度小，方便实施，但是通用度低</li>
<li>自组织模式：应用之间平等，不存在相互管理的模式，设计难度大，不方便实施，通用度高</li>
</ul>
<p>从实现的方式上可以分为以下几种：</p>
<ul>
<li><p>路由分发式：通过页面上 url 的变化来加载不同的组件应用，通常可以通过 HTTP 服务器的反向代理实现或者应用框架自带的路由来解决</p>
</li>
<li><p>前端容器化：借助 iframe 作为容器，来容纳其他前端应用</p>
</li>
<li><p>应用组件化：将业务组件代码抽离出来，通过云端和 sdk 端组合，借助框架进行 runtime 时的重载。或者借助 Web Components 技术。</p>
<p>…</p>
</li>
</ul>
<p>从多 bundle 集成分析：</p>
<ul>
<li><p>服务端集成 vs 构建时集成 vs 运行时集成</p>
<ul>
<li><p>服务端集成：各子服务负责渲染并服务于对应的微前端，主服务向各个子服务发起请求</p>
</li>
<li><p>构建时集成：常见的构建时集成方式是将子应用发布成独立的 npm 包，共同作为主应用的依赖项，构建生成一个供部署的 js bundle。</p>
</li>
<li><p>运行时集成：避免发布阶段的耦合</p>
<p>常见方式：ifame、js（前端路由）、web Components</p>
</li>
</ul>
</li>
<li><p>js entry vs  html entry</p>
<ul>
<li>js entry：通常是子应用将资源打成一个 entry script，包括 css、图片等资源，问题是打出来的包体积庞大、无法使用资源的并行加载</li>
<li>html entry：直接将子应用页面 html 作为入口，主框架可以将其作为子节点插入主框架的容器中，减少主应用的接入成本</li>
</ul>
</li>
</ul>
<h3 id="技术上各实现方式的优缺点"><a href="#技术上各实现方式的优缺点" class="headerlink" title="技术上各实现方式的优缺点"></a>技术上各实现方式的优缺点</h3><ul>
<li><p>iframe</p>
<p>优点：纯天然实现 100% 隔离，包括样式隔离和全局变量隔离，同时保留了混合应用架构的业务解耦、独立开发部署、技术栈无关等优势，又通过公共应用解决了公共内容等的维护问题，在应用切换时能保障公共内容不会重复渲染</p>
<p>问题：</p>
<ul>
<li>性能问题：iframe 复用连接池机制，容易在切换应用时给人页面卡顿的感受</li>
<li>数据同步问题：完全的运行环境隔离，通常用 postMessage 解决复杂通信问题，但对路由切换同步（报站该页面刷新时内嵌应用正常定位）、内容高度上报（解决双滚动条问题）、登录信息同步、弹窗遮罩问题都需要成本解决</li>
</ul>
</li>
<li><p>npm 包</p>
<p>缺点：最大的问题是会在发布阶段造成耦合，任何一个子应用有变更都要整个重新编译，即对于产品局部小改动也要发布一个新版本</p>
</li>
<li><p>web components</p>
<p>可以创建可重用的定制元素，主要由四项技术组件组成：</p>
<ul>
<li>custom elements，允许开发者创建自定义元素</li>
<li>shadow DOM，通常将 shadow DOM 附加到主文档 DOM 中，可以控制其关联的功能</li>
<li>HTML templates，即 <code>&lt;template&gt;</code>、<code>&lt;slot&gt;</code>元素，用于编写不在页面中显示的标记模板</li>
<li>HTML imports，用于引入自定义组件</li>
</ul>
<p>问题：</p>
<ul>
<li>上下游生态系统不完善，缺乏相应的一些第三方控件支持</li>
<li>系统架构复杂，组件间通信麻烦</li>
<li>兼容性问题，并不是所有的浏览器都能支持 shadow DOM，支持 web Components</li>
</ul>
</li>
</ul>
<h3 id="业界方案"><a href="#业界方案" class="headerlink" title="业界方案"></a>业界方案</h3><ul>
<li><p>single-spa</p>
<p>single-spa 类似于状态机，通过监听路由的变化来渲染不同的应用，从本质上来说是以路由分发式实现微前端。</p>
</li>
<li><p>qiankun</p>
<p>qiankun 1.0 中是基于 single-spa，也是以路由切换为基础实现。在 2.0 中将切换 api 导出用户使用，可以直接调用 api 来切换状态</p>
</li>
<li><p>edc</p>
<p>edc，Era Dynamic Component 是美团金服推出的云组件动态化方案，其实现方式基础是应用组件化，通过借助框架虚拟 dom 的形式，在 runtime 阶段通过 js entry 方式将组件插入容器组件中。</p>
</li>
</ul>
<h3 id="微前端的关键问题"><a href="#微前端的关键问题" class="headerlink" title="微前端的关键问题"></a>微前端的关键问题</h3><ul>
<li><p>影响隔离</p>
<p>包括样式隔离和作用域隔离，作用域隔离有各种模块定义规范（如 es module、amd、umd 等），全局变量隔离，可以通过 proxy 实现 js 沙箱，组件内部所有 window、document 操作都通过 proxy 进行，但 proxy 不能兼容 ie，这也是其中的问题。样式隔离参考另一篇</p>
</li>
<li><p>资源复用</p>
<p>资源复用有利于 UI 一致性和代码复用，减少网络请求等</p>
</li>
<li><p>组件通信</p>
<ul>
<li>通过自定义事件间接通信是一种避免直接耦合的常用方式</li>
<li>类似 react 中的单向数据流，从容器应用向子应用传递数据和回调函数</li>
<li>路由参数</li>
</ul>
<p>原则上无论何种方式都要尽可能减少子应用间的通信，以避免大量弱依赖造成的强耦合</p>
</li>
</ul>
<blockquote>
<p>参考资料</p>
<ul>
<li><a href="https://zhuanlan.zhihu.com/p/78362028" target="_blank" rel="noopener">知乎：可能是你见过最完善的微前端解决方案</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/96464401" target="_blank" rel="noopener">知乎：微前端到底是什么</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/94847293?utm_source=wechat_timeline" target="_blank" rel="noopener">知乎：ice 在微前端的探索</a></li>
<li><a href="https://segmentfault.com/a/1190000021507194" target="_blank" rel="noopener">segmentfault： 微前端的原理及实现</a></li>
<li><a href="https://segmentfault.com/a/1190000015566927" target="_blank" rel="noopener">segmentfault: 实施微前端的六种方式</a></li>
</ul>
</blockquote>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/09/25/css-style-isolation/" rel="next" title="css 中的样式隔离">
                <i class="fa fa-chevron-left"></i> css 中的样式隔离
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/09/28/read-http-the-definitive-guide/" rel="prev" title="【读书笔记】HTTP 权威指南">
                【读书笔记】HTTP 权威指南 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#背景"><span class="nav-number">1.</span> <span class="nav-text">背景</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#架构模式"><span class="nav-number">2.</span> <span class="nav-text">架构模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#技术上各实现方式的优缺点"><span class="nav-number">3.</span> <span class="nav-text">技术上各实现方式的优缺点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#业界方案"><span class="nav-number">4.</span> <span class="nav-text">业界方案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#微前端的关键问题"><span class="nav-number">5.</span> <span class="nav-text">微前端的关键问题</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
